<template>
	<view class="u-page">
		<view class="header">
		</view>
		<view class="content">
		
			<view class="projectList">
				<view class="label">{{title}}</view>
				<view v-if="lists != ''">
				<block v-for="(item, index) in lists" :key="index">
					<view class="lists" >
						<view class="filename"><image src="../../../static/icon/file.png" mode=""></image></view>
						<view class="list_contnet">
							<view class="projecttitle">{{item.filename}}</view>
						</view>
						<view class="chakan" @click="downLoadFile(item.filepath)">
							<view>查看</view>
						</view>
					</view>
				</block>
				</view>
				<view class="zanwu" v-else>
					<view>暂无文件资料</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fid:'',
				title:'',
				lists: [],
				
			}
		},
		onLoad(data) {
			this.fid = data.id
			this.title = data.title
			
			this.filesList();
		},
		methods: {
			
			async filesList(){
				const files = await this.GQL({
					"operationName": "allSlProjectFolderFiles",
					"query": "query allSlProjectFolderFiles($filter: SlProjectFolderFileFilter) { allSlProjectFolderFiles(filter:$filter) { nodes { id fid filename createtime filepath } } }",
					"variables": {"filter": {"fid":{"equalTo":this.fid}}}
				})
				if(files.data.allSlProjectFolderFiles.nodes !=''){
					
					this.lists = files.data.allSlProjectFolderFiles.nodes
				}
			},
			downLoadFile(url){
				uni.showLoading({
						title: '打开中...',
					})
					console.log('111',url)
				 uni.downloadFile({
					url: url,
					success: function (res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function (res) {
								uni.hideLoading()
								console.log('打开文档成功');
							},
							fail: (e) => {
								uni.hideLoading()
								console.log(e);
							},
						});
					},
					fail: function(err) { 
						uni.showLoading({
								title: '打开失败',
							})
						uni.hideLoading()
						// 提示：预览文件失败
					},
				});
			}
			
			
		}
	}
</script>

<style lang="scss">
.u-page{
		background-color: #FBFCFE;
	}
	 .header{
	 	width: 100%;
	 	height: 200px;
	 	/* color: #FFFFFF; */
	 	background: linear-gradient(#C7171E, #f0f2f5); /* 标准的语法 */
	 	
	 }
	 .zanwu{
	 		 font-size: 14px;
	 		 font-family: PingFangSC-Medium, PingFang SC;
	 		 font-weight: 500;
	 		 color: #9BA7C1;
	 		 line-height: 16px;
	 		 margin: 10px;
	 		 padding-top: 10px;
	 }
	.content{
		position: relative;
		top: -200px;
		
		margin: 15px;
		.label{
			font-size: 16px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #161E3E;
			line-height: 16px;
			padding:23px 0;
			// padding-top: 10px;
		}
		.projectList{
			background-color: #FFFFFF;
			border-radius: 5px;
			min-height: 500px;
			padding: 0 16px;
			.lists{
				padding: 12px 0;
				// margin: 0px 10px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #D7D7D7;
				height: 30px;
			}
			.list_contnet{
				flex: 1;
				width: 200px;
				margin-left: 10px;
			}
			.filename{
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #161E3E;
				line-height: 16px;
			}
			.chakan{
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #007AFF;
				// line-height: 16px;
			}
			image{
				width: 22px;
				height: 22px;
			}
			
		}	
		.upFiles{
			margin-top: 20px;
		}
	}
	
</style>
